<template>
  <div class="search-box-layout">
  <Row>
    <Col span="4">
      <div>
        <p class="label">{{$t('common.company')}}</p>
        <div class="ipt">
          <Select v-model="searchParams.companyId" filterable clearable :placeholder="`${$t('common.selectInfo')}`" @on-change="companyChange">
            <Option v-for="(item,index) of tagList" :value="item.id" :key="index">{{ item.name }}</Option>
          </Select>
        </div>
      </div>
    </Col>
    <Col span="4">
      <div>
        <p class="label">{{ $t('equipmentscrapped.Location') }}</p>
        <div class="ipt">
          <Cascader clearable
                    v-model="searchParams.org"
                    :data="orgList"
                    @on-change="handleCasChange"
                    :placeholder="`${$t('common.selectInfo')}`"></Cascader>
        </div>
      </div>
    </Col>
    <Col span="4">
      <div>
        <p class="label">{{ $t('equipmentscrapped.EquipmentNo') }}</p>
        <div class="ipt">
          <Input v-model="searchParams.deviceNo" :placeholder="`${$t('common.inputInfo')}`"/>
        </div>
      </div>
    </Col>
    <Col span="4">
      <div>
        <p class="label">{{$t('equipmentscrapped.Name')}}</p>
        <div class="ipt">
          <Input v-model="searchParams.deviceName" :placeholder="`${$t('common.inputInfo')}`"/>
        </div>
      </div>
    </Col>
  <Col span="4">
    <div>
      <p class="label hide-label">--</p>
      <div class="ipt">
        <Button class="search-btn" type="primary" @click="search">{{ $t('common.Query') }}</Button>
        <Button
            class="reset-btn"
            @click="reset"
        >{{ $t('common.reset') }}
        </Button>
      </div>
    </div>
  </Col>
  </Row>
  </div>
</template>

<script>

import {findOrgByToken} from "@/api";
import recursion from "@/util/recursion";

let timerNo = null
let timerName = null
let timerScrap = null

export default {
  name: "searchPrams",
  props: ['type', 'ifFinish'],
  data() {
    return {
      searchParams: {},
      deviceNoLists: [],
      scrapNoList: [],
      deviceNameList: [],
      tagList: [],
      orgList: [],
    }
  },
  mounted() {
    this.getCompanyList()
    this.getOrgList()
    this.search()
  },
  methods: {
    companyChange(val){
      const obj = this.tagList.find(item=> item.id==val)
      if (obj){
        this.searchParams.companyName = obj.name
      }else{
        this.searchParams.companyName = ""
      }
    },
    reset(){
      this.searchParams = {};
      this.search();
    },
    search() {
      this.$emit('search', this.searchParams)
    },
    deviceNoChange(val) {
      this.searchParams.deviceNo = val
    },
    deviceNameChange(val) {
      this.searchParams.deviceName = val
    },

    getDeviceNo(val) {
      clearTimeout(timerNo)
      this.deviceNo = val;
      timerNo = setTimeout(() => {
        this.axios({
          method: 'get',
          url: '/dms/dmsDevice/deviceInfoByOrgId',
          params: {
            deviceNo: val,
            orgId: '',
            deviceName: ''
          }
        }).then(res => {
          if (this.deviceNo === val) {
            this.deviceNoLists = res.data;
          }

        })
      }, 200)
    },
    getDeviceName(val) {
      this.deviceName = val;
      clearTimeout(timerName)
      timerName = setTimeout(() => {
        this.axios({
          method: 'get',
          url: '/dms/dmsDevice/deviceNameListByName',
          params: {
            deviceName: val
          }
        }).then(res => {
          if (this.deviceName === val) {
            this.deviceNameList = res.data;
            this.$forceUpdate()
          }
        })
      })
    },
    handleCasChange(val) {
      this.searchParams.orgId = val[val.length - 1]
    },
    getCompanyList() {
      this.axios({
        method: 'get',
        url: '/basic/company/getCompanyListByUser',
        params: {}
      }).then(res => {
        if (res.code === 200) {
          let arr = res.data.map(item => {
            return {
              ...item,
              id: item.id
            }
          })
          this.tagList = [...this.tagList, ...arr]
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getOrgList() {
      let params = {
        level: 3
      }
      findOrgByToken(params).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'id',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)


        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
